<template>
    <h3>2.条件渲染</h3>
    <!-- 条件渲染，相当于if，else，两者有一个会执行 -->
    <div v-if="flag">你能看见我吗</div>
    <div v-else>那你还是看看我吧</div>
    <!-- 可以有多个条件判断 -->
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
    <!-- v-show功能和v-if类似 -->
    <div v-show="flag">你能看见我吗</div>
    <!-- 区别：v-if是惰性的，它的渲染是基于条件进行销毁和重建，改变成本更大，
    而v-show是第一次都会渲染，基于css的display属性进行隐藏和显示，改变成本小 -->
</template>
<script>

export default {
    data(){
        return{
            flag:true,
            type:"D"
        }
    }

}

</script>